<template>
	<view class="wrapper">
	        <view class="title">富文本演示 (解析HTML字符串)</view>
	        <view class="box">
	            <!-- :nodes 绑定了 data 中的 htmlString -->
	            <rich-text :nodes="htmlString"></rich-text>
	        </view>
	    </view>
</template>

<script>
	 export default {
	        data() {
	            return {
	                // 模拟一段从服务器获取的HTML代码
	                htmlString: `
	                    <h3 style="color: #007aff;">uni-app简介</h3>
	                    <p>这是一个跨平台的开发框架，可以让我们用一套代码，发布到多个平台。</p>
	                    <p>它支持<strong style="color: red;">加粗</strong>、<em>斜体</em>等多种样式。</p>
	                    <img src="/static/logo.png" style="max-width: 100%; border-radius: 5px;" />
	                    <p><strong>注意:</strong> img 标签的 src 路径我们使用了 static 目录下的本地图片。</p>
	                `
	            }
	        }
	    }
</script>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}
.box {
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
}
</style>
